<template>
  <div>
    <el-form label-position="top" :model="form">
      <el-form-item label="公司地址">
        <el-input :disabled="bianji" v-model="form.addr" />
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input :disabled="bianji" v-model="form.contactUs" />
      </el-form-item>
      <el-form-item label="微信联系人">
        <el-upload
          v-if="!bianji"
          class="avatar-uploader"
          action="http://47.101.57.131:8101/common/api/file/upload2"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img v-if="form.wechatUrl" :src="form.wechatUrl" class="avatar"  alt=""/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <img v-else :src="form.wechatUrl" class="avatar"  alt=""/>
      </el-form-item>
      <el-form-item label="">
        <el-button type="success" v-show="bianji" @click="bianji = false">编辑</el-button>
        <el-button type="primary" v-show="!bianji" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import tinymceComponent from '@/components/tinymce'
import { getLxContactUs,updateLxContactUs } from "@/api/config";

export default {
  name: "index",
  components:{
    tinymceComponent
  },
  data() {
    return {
      form:{
        id: 0,
        addr: "",
        contactUs: "",
        wechatUrl: "",
        fileId: 0,
        oldFileId: 0
      },
      bianji:true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(){
      const {data} = await getLxContactUs()
      console.log(data)
      this.form = data
    },
    submit(){
      this.$confirm('此操作将修改编辑, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await updateLxContactUs(this.form)
        this.bianji = true
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleAvatarSuccess(res){
      console.log(res.data.fileUrl)
      this.form.oldFileId = this.form.fileId
      this.$set(this.form,'wechatUrl',res.data.fileUrl)
      this.form.fileId = res.data.id
    }
  }
}
</script>

<style scoped>

</style>
